<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Member - 17outman.com</title>
<link rel="stylesheet" href='<c:url value="/resources/scripts/operamasks-ui-1.0/css/default/om-default.css"/>' />
<link rel="stylesheet" href='<c:url value="/resources/themes/cms/common.css"/>' />
<script type="text/javascript" src='<c:url value="/resources/scripts/jquery.min.js"/>'></script>
<script src='<c:url value="/resources/scripts/operamasks-ui-1.0/js/operamasks-ui.min.js"/>'></script>
<!-- view_source_begin -->
<style type="text/css">
    #nav_cont{width:585px;margin-left:auto;margin-right:auto;}
    .sex {width: auto;border:none;}
    .sex:focus{border:none;}
    .input_slelct {width: 81%;}
    .textarea_text {border: 1px solid #A1B9DF; height: 40px;width: 445px;}
    table.grid_layout tr td {font-weight: normal; height: 15px; padding: 5px 0; vertical-align: middle;}
    .toolbar { padding: 12px 0 5px;text-align: center; }
    .address {width:445px;}
 	.querycontent {color: blue; font-size: 12px; width: 500px;}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $("#submit").omButton();
    $("#reset").omButton();
    $("#nav_cont table tr td:nth-child(5n-4)").attr('align', 'right');
    var options = {
        beforeSubmit : showRequest,
        success : showResponse
    };
    
  	//对form进行校验
    $('#formId').validate({
        focusInvalid: false,
        rules: {
            email: {
                required : true
            },
            password : {
                required : true,
            }
        },
        messages : {
          	eamil: {
          	    required : '必须输入邮箱！'
          	},
          	password : {
          	    required : '必须输入密码！'
          	}
        },
        errorPlacement : function(error, element) { 
            if(error){
                $(element).parents().map(function(){
                    if(this.tagName.toLowerCase()=='td' && $(error).text() != ''){
                        var attentionElement = $(this).next().children().eq(0);
                        attentionElement.css('display','block');
	                    attentionElement.next().html(error);
                    }
                });
            }
        },
        showErrors: function(errorMap, errorList) {
            if(errorList && errorList.length > 0){
                $.each(errorList,function(index,obj){
                    var msg = this.message;
                    $(obj.element).parents().map(function(){
                        if(this.tagName.toLowerCase()=='td'){
                            var attentionElement = $(this).next().children().eq(0);
                            attentionElement.show();
    	                    attentionElement.next().html(msg);
                        }
                    });
                });
            }else{
                $(this.currentElements).parents().map(function(){
                    if(this.tagName.toLowerCase()=='td'){
                        $(this).next().children().eq(0).hide();
                        
                    }
                });
            }
            this.defaultShowErrors();
        },
    	submitHandler : function(){
            alert('提交成功！');
            return false;
        }
    });
    
  	$('.errorImg').bind('mouseover',function(){
        $(this).next().css('display','block');
    }).bind('mouseout',function(){
        $(this).next().css('display','none');
    });
    
    //通过监听form的submit事件，对form进行ajax提交。
    $('#formId').submit(function() {
        if (!$("#formId").valid()) 
            return false;
        $(this).omAjaxSubmit(options);
        return false; //此处必须返回false，阻止常规的form提交。
    });
});
</script>
<!-- view_source_end -->
</head>
<body>
<center>
	<h2>Member Login</h2>
	<div class="separator"></div>
	<!-- view_source_begin -->
     <form id="formId" action='<c:url value="/member/login"/>'>
	    <div id="nav_cont">
	        <table class="grid_layout">
	            <tr>
	                <td width="80px"><span class="color_red">*</span>邮箱：</td>
	                <td ><input name="email" /></td>
	                <td width="30px"><span class="errorImg"></span><span class="errorMsg" ></span></td>
	            </tr>
	            <tr>
	                <td width="80px"><span class="color_red">*</span>密码：</td>
	                <td ><input name="password" /></td>
	                <td width="30px"><span class="errorImg"></span><span class="errorMsg" ></span></td>
	            </tr>
	             <tr>
	                <td width="80px"><a href='<c:url value="/member/regist"/>'>注册</a></td>
	                <td >&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">查看隐私申明</a></td>
	                <td width="30px">&nbsp;</td>
	            </tr>
	        </table>
	        
	        <div class="toolbar">
	            <button id="submit" type="submit">提交</button> 
	            <button id="reset" type="reset">重置</button>
	        </div>
	    </div>
    </form>
    <!-- view_source_end -->
</center>
</body>
</html>